<template>
  <el-row>
    <el-col :span="24">
      <div class="box">
        <!-- 当前学校信息form -->
        <div>
          <div class="box-header">
            <h3 class="box-title" style="line-height: 40px;float: left;">
              当前学校信息
            </h3>
          </div>
          <div class="box-body">
            <el-form ref="form" label-width="100px">
              <el-col :span="6">
                <el-form-item label="学校代码">
                  <el-input
                    size="small"
                    class="input-width"
                    placeholder="请输入内容"
                    v-model="currentSch.sch_code"
                    :disabled="boxDisabled"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="学校名称">
                  <el-input
                    size="small"
                    class="input-width"
                    placeholder="请输入内容"
                    v-model="currentSch.sch_name"
                    :disabled="boxDisabled"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="学校性质">
                  <el-select
                    size="small"
                    class="input-width"
                    v-model="currentSch.sch_property"
                    loading-text="请选择"
                    clearable
                  >
                    <el-option
                      v-for="item in propertys"
                      :key="item.value"
                      :label="item.label"
                      :value="item.label"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="联系电话">
                  <el-input
                    size="small"
                    class="input-width"
                    placeholder="请输入内容"
                    v-model="currentSch.sch_phone"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="传真">
                  <el-input
                    size="small"
                    class="input-width"
                    placeholder="请输入内容"
                    v-model="currentSch.sch_faxaphone"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="学校隶属">
                  <el-input
                    size="small"
                    class="input-width"
                    placeholder="请输入内容"
                    v-model="currentSch.sch_type"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="主管部门">
                  <el-input
                    size="small"
                    class="input-width"
                    placeholder="请输入内容"
                    v-model="currentSch.sch_authorities"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="办学层次">
                  <el-select
                    size="small"
                    class="input-width"
                    v-model="currentSch.sch_level"
                    loading-text="请选择"
                    clearable
                  >
                    <el-option
                      v-for="item in levels"
                      :key="item.value"
                      :label="item.label"
                      :value="item.label"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="省份">
                  <el-select
                    size="small"
                    class="input-width"
                    v-model="currentSch.sch_province"
                    loading-text="请选择"
                    clearable
                  >
                    <el-option
                      v-for="item in provinces"
                      :key="item.code"
                      :label="item.name"
                      :value="item.name"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="位置">
                  <el-input
                    size="small"
                    class="input-width"
                    placeholder="请输入内容"
                    v-model="currentSch.sch_address"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="详细地址">
                  <el-input
                    size="small"
                    class="input-width"
                    placeholder="请输入内容"
                    v-model="currentSch.sch_postal_address"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="邮编">
                  <el-input
                    size="small"
                    class="input-width"
                    placeholder="请输入内容"
                    v-model="currentSch.sch_postal_code"
                  ></el-input>
                </el-form-item>
              </el-col>
               <el-col :span="6">
                <el-form-item label="在校学生人数">
                  <el-input
                    size="small"
                    class="input-width"
                    placeholder="请输入内容"
                    v-model="currentSch.sch_allstu"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="本科生人数">
                  <el-input
                    size="small"
                    class="input-width"
                    placeholder="请输入内容"
                    v-model="currentSch.sch_graduate"
                  ></el-input>
                </el-form-item>
              </el-col>
               <el-col :span="6">
                <el-form-item label="专科人数">
                  <el-input
                    size="small"
                    class="input-width"
                    placeholder="请输入内容"
                    v-model="currentSch.sch_junior"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="硕士研究生人数">
                  <el-input
                    size="small"
                    class="input-width"
                    placeholder="请输入内容"
                    v-model="currentSch.sch_master"
                  ></el-input>
                </el-form-item>
              </el-col>
               <el-col :span="6">
                <el-form-item label="博士研究生人数">
                  <el-input
                    size="small"
                    class="input-width"
                    placeholder="请输入内容"
                    v-model="currentSch.sch_doctoral"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <div style="text-align: center; margin-top: 8px;">
                  <el-button
                    type="success"
                    size="small"
                    icon="el-icon-edit"
                    @click="editSch()"
                    v-if="editBtn"
                    >修改</el-button
                  >
                  <el-button
                    type="primary"
                    size="small"
                    icon="el-icon-refresh-right"
                    v-if="seeSchList"
                    @click="reSch()"
                    :disabled="reBtnDis"
                    >重置</el-button
                  >
                  <el-button
                    type="success"
                    size="small"
                    icon="el-icon-position"
                    @click="saveSch()"
                    v-if="addBtn"
                    >添加</el-button
                  >
                </div>
              </el-col>
            </el-form>
          </div>
        </div>
        <!-- 显示学校列表list -->
        <div
          v-if="seeSchList"
          style="border-top: 1px dashed #d2d6de; margin-top: 12px;"
        >
          <!-- 搜索 -->
          <div class="box-header">
            <h3 class="box-title" style="line-height: 40px;float: left;">
              所有学校信息
            </h3>
            <el-form :model="searchData">
              <el-input
                size="small"
                style="width: 11%; margin: 0 19px 0 50px;"
                placeholder="学校代码"
                clearable
                v-model="searchData.sch_code"
              ></el-input>
              <el-input
                size="small"
                style="width: 11%; margin-right: 19px;"
                placeholder="学校名称"
                clearable
                v-model="searchData.sch_name"
              ></el-input>
              <!-- <el-select size="small" class="input-width" v-model="searchData.sch_province" placeholder="请选择省份" clearable style="width: 11%; margin-right: 19px;">
                <el-option
                  v-for="item in provinces"
                  :key="item.code"
                  :label="item.name"
                  :value="item.name">
                </el-option>
              </el-select> -->
              <el-button
                style="background: rgba(247, 210, 6, 1); color: black;"
                size="small"
                icon="el-icon-search"
                @click="searchSch()"
                >搜索</el-button
              >
              <el-button
                type="danger"
                size="small"
                :loading="deleteLoading"
                v-if="multipleSelection.length > 0"
                icon="el-icon-delete"
                @click="deleteSch(multipleSelection)"
                >删除</el-button
              >
                <el-button
                  style="background: #367fa9;color: white;"
                size="small"
                icon="el-icon-download"
                @click="studentDown()"
                >下载配比表</el-button>
                <el-button
                  style="background: #367fa9;color: white;"
                size="small"
                icon="el-icon-download"
                @click="showExcelModel()"
                >下载学校账号模板</el-button>
                <!-- http://8.142.34.26:8097/php/index.php/admin/Upload/EduImport -->
                <el-upload
                 style="display: inline; margin-left: 10px;margin-right: 10px;"
                action="http://8.142.34.26:8097/php/index.php/admin/Upload/EduImport"
                accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
                :on-success="handleSuccess"
                :show-file-list="false"
                multiple>
                <el-button size="small" type="primary">学校账号上传</el-button>
              </el-upload>
            </el-form>
       
          </div>
          <!-- 列表信息 -->
          <div class="box-body">
            <el-table
              :data="schList"
              v-loading="loading"
              class="tableBox"
              stripe
              style="width: 100%"
              :cell-style="{ padding: '8px 0px' }"
              @row-click="clickRow"
              @selection-change="handleSelectionChange"
            >
              <el-table-column
                type="selection"
                :context="_self"
                width="50"
              ></el-table-column>
              <el-table-column
                prop="sch_code"
                label="学校代码"
                width="120"
              ></el-table-column>
              <el-table-column
                prop="sch_name"
                label="学校名称"
              ></el-table-column>
              <el-table-column prop="sch_phone" label="电话"></el-table-column>
              <el-table-column
                prop="sch_level"
                label="办学层次"
                width="100"
              ></el-table-column>
              <el-table-column
                prop="sch_property"
                label="学校性质"
                width="100"
              ></el-table-column>
              <el-table-column
                prop="sch_postal_address"
                label="详细地址"
              ></el-table-column>
            </el-table>
            <el-pagination
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              layout="prev, pager, next"
              :page-count="total"
              style="float: right;"
            ></el-pagination>
          </div>
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import common from '../../../assets/js/common'
import http from './../../../assets/js/http'
export default {
  data() {
    return {
      currentPage: 1,
      total: 1,
      provinces: common.province,
      propertys: [
        {
          value: '选项1',
          label: '民办'
        },
        {
          value: '选项2',
          label: '公办'
        }
      ],
      levels: [
        {
          value: '选项1',
          label: '本科'
        },
        {
          value: '选项2',
          label: '专科'
        }
      ],
      currentSch: {
        sch_code: '', // 学校代码
        sch_name: '', // 学校名称
        sch_property: '', // 学校性质
        sch_phone: '', // 联系电话
        sch_faxaphone: '', // 传真
        sch_type: '', // 学校属性
        sch_authorities: '', // 隶属部门
        sch_level: '', // 办学层次
        sch_province: '', // 省份
        sch_address: '', // 位置
        sch_postal_address: '', // 详细地址
        sch_postal_code: '', // 邮编
        sch_allstu: '', // 在校人数
        sch_graduate: '', // 本科生人数
        sch_junior: '', // 专科人数
        sch_master: '', // 硕士研究生人数
        sch_doctoral: '' //  博士研究生人数
      },
      studentTable: [],
      seeSchList: true,
      searchData: {
        sch_code: '',
        sch_name: ''
        /* sch_province: '' */
      },
      loading: true,
      schList: [],
      boxDisabled: false,
      editBtn: false,
      addBtn: true,
      reBtnDis: false,
      userInfo: Lockr.get('userInfo'),
      searchId: 0,
      multipleSelection: [],
      tips: {
        sch_addressTips: '位置',
        sch_authoritiesTips: '隶属部门',
        sch_codeTips: '学校代码',
        sch_faxaphoneTips: '传真',
        sch_levelTips: '办学层次',
        sch_nameTips: '学校名称',
        sch_phoneTips: '联系电话',
        sch_postal_addressTips: '详细地址',
        sch_postal_codeTips: '邮编',
        sch_propertyTips: '学校性质',
        sch_provinceTips: '省份',
        sch_typeTips: '学校属性',
        sch_allstuTips: '在校人数',
        sch_allstuTips: '本科生人数',
        sch_allstuTips: '专科人数',
        sch_allstuTips: '硕士研究生人数',
        sch_allstuTips: '博士研究生人数' 
      },
      deleteLoading: false,
      filename:'湖北省高校辅导员和在校生统计表'
    }
  },
  methods: {
   
      handleSuccess(res,file,fileList) {
        if(res.code == 200){
          _g.toastMsg('success',res.data)
        }else{
          _g.toastMsg('error',res.error + '，请重新上传！')
        }
      },
    reSch() {
      _g.toastMsg('warning', '新增学校信息，请完整填写')
      this.currentSch = {}
      /*
        1.修改的保存换为新增的保存
        2.设置学校名称、学校代码的disable为可编辑
        3.设置重置按钮不能被点击
      */
      this.editBtn = false
      this.addBtn = true
      if (this.boxDisabled == true) {
        this.boxDisabled = !this.boxDisabled
      }
      this.reBtnDis = !this.reBtnDis
    },
    clickRow(row) {
      _g.toastMsg('warning', '修改完信息，保存请点击下方修改按钮')
      this.currentSch = row
      // 设置学校名称、学校代码的disable为不可编辑
      this.boxDisabled = true
      this.reBtnDis = false
      this.addBtn = false
      this.editBtn = true
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    deleteSch(row) {
      this.$confirm('确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.deleteLoading = true
          console.log(row)
          let ids = []
          for (let i = row.length - 1; i >= 0; i--) {
            ids[i] = row[i].sch_id
          }
          console.log(ids)
          this.apiPost('admin/Train/EduschDelete', { sch_id: ids }).then(
            res => {
              this.handelResponse(res, data => {
                _g.toastMsg('success', res.data)
                // 当前删除数量 == table.length && currentPage > 1  page--
                if (
                  ids.length === this.schList.length &&
                  this.currentPage !== 1
                ) {
                  this.currentPage--
                }
                this.handleCurrentChange(this.currentPage)
                this.deleteLoading = false
              })
            }
          )
        })
        .catch(() => {
          // handle error
        })
    },
    studentDown() {
      this.apiPost('admin/Train/StuteaList').then(res =>{
        this.handelResponse(res,data =>{
          // console.log(this.studentTable)
          this.studentTable = res.data
          console.log(this.studentTable)
          this.handleDownloadExcel();
          // var that = this
  
        })
      })
    },
    showExcelModel() {
       window.location.href="http://8.142.34.26:8097/php/uploads/teacherdemo.xlsx";
      // this.apiPost(' admin/Upload/EduImport').then((res) => {
      //   this.handelResponse(res, (data) => {
      //     window.location.href = res.data.file_dir
      //   })
      // })
    },
    handleDownloadExcel(){
              require.ensure([], () => {
           const { export_json_to_excel } = require('../../../vendor/export2Excel') 
          // import("@/vendor/Export2Excel").then(excel => {
            const multiHeader = [
              [
                "湖北省高校辅导员和在校生统计表", "","", "","", "", "", "", "", "","","","","","","","","", "", ""
              ]
            ];
            const multiHeader2 = [
              [
                "学校名称",
                "辅导员总人数",
                "分性别人数",
                "",
                "分政治面貌人数",
                "",
                "",
                "",
                "分人事关系人数",
                "",
                "",
                "",
                "心理健康专职辅导员人数",
                "学工类人数",
                "",
                "",
                "研工类人数",
                "",
                "",           
                "在校学生人数",
                "",
                "",
                ""
              ]
            ];
            const tHeader = [
                '',
                '',
                '男',
                '女',
                '中共党员',
                '中共预备党员',
                '群众',
                '其他',
                '事业编制',
                '合同制（与学校签约）',
                '劳务派遣、人事代理（与第三方签约）',
                '其他',
                '',   
                '专职辅导员',
                '兼职辅导员',
                '学工管理干部',
                '专职辅导员',
                '兼职辅导员',
                '研工管理干部',
                '本科',
                '专科',
                '硕士研究生',
                '博士研究生'
            ];
            // const tHeader = ['name', '用户名', '性别']
            const filterVal = ['sch_name','train_sum','man','woman','zgdy','zgybdy','qz','qt','sybz_sum','htz_sum','lwpq_sum','qt_sum','xljk','xg_zz','xg_jz','xg_xg','yg_zz','yg_jz','yg_yg','sch_graduate','sch_junior','sch_master','sch_doctoral']; // 导出的表头字段名，需要导出表格字段名
            const list = this.studentTable;
            const data = this.formatJson(filterVal, list);
            const merges = [
              "A1:W1", "A2:A3", "B2:B3","C2:D2","E2:H2","I2:L2","M2:M3","N2:S2","Q2:P2","T2:W2"
            ]; 
            export_json_to_excel({multiHeader,multiHeader2,header: tHeader, data,merges,
          filename: this.filename });// 导出的表格名称，根据需要自己命名
        })
    },
    formatJson(filterVal, jsonData) {
        // console.log(jsonData)
        return jsonData.map(v => filterVal.map(j => v[j]
        )
      );
    },
    saveSch() {
      // 新增保存成功过后，页面显示的是 “重置” 和 “新增保存” 的按钮
      this.reBtnDis = false
      var checkResult = this.checkList(this.currentSch, [
        {
          name: 'sch_code',
          reg: ['notnull', 'code']
        },
        {
          name: 'sch_name',
          reg: ['notnull', 'info']
        },
        {
          name: 'sch_property',
          reg: ['notnull']
        },
        {
          name: 'sch_phone',
          reg: ['notnull', 'office']
        },
        {
          name: 'sch_faxaphone',
          reg: ['notnull', 'fax']
        },
        {
          name: 'sch_type',
          reg: ['notnull', 'info']
        },
        {
          name: 'sch_authorities',
          reg: ['notnull', 'info']
        },

        {
          name: 'sch_level',
          reg: ['notnull']
        },
        {
          name: 'sch_province',
          reg: ['notnull']
        },
        {
          name: 'sch_address',
          reg: ['notnull']
        },
        {
          name: 'sch_postal_address',
          reg: ['notnull']
        },
        {
          name: 'sch_postal_code',
          reg: ['notnull', 'postalcode']
        },
        {
          name: 'sch_allstu',
          reg: ['notnull']
        },
        {
          name: 'sch_graduate',
          reg: ['notnull',]
        },
        {
          name: 'sch_junior',
          reg: ['notnull']
        },
        {
          name: 'sch_master',
          reg: ['notnull']
        },
        {
          name: 'sch_doctoral',
          reg: ['notnull']
        },
      ])
      if (_g.j2s(checkResult) === '{}') {
        let data = this.currentSch
        console.log(data)
        this.apiPost('admin/Train/EduschWrite', data).then(res => {
          this.handelResponse(res, data => {
            _g.toastMsg('success', res.data)
            // this.currentSch = {}
            this.currentSch = {
              sch_code: '', // 学校代码
              sch_name: '', // 学校名称
              sch_property: '', // 学校性质
              sch_phone: '', // 联系电话
              sch_faxaphone: '', // 传真
              sch_type: '', // 学校属性
              sch_authorities: '', // 隶属部门
              sch_level: '', // 办学层次
              sch_province: '', // 省份
              sch_address: '', // 位置
              sch_postal_address: '', // 详细地址
              sch_postal_code: '', // 邮编
              sch_allstu: '',
              sch_graduate: '',
              sch_junior: '',
              sch_master: '',
              sch_doctoral: ''
            }
            this.currentPage = 1
            this.handleCurrentChange(this.currentPage)
          })
        })
      } else {
        for (const key in checkResult) {
          _g.toastMsg('error', this.tips[key] + checkResult[key])
          break
        }
      }
    },
    editSch() {
      console.log(this.currentSch)
      let data = _g.cloneJson(this.currentSch)
      data.sch = data.sch_name
      console.log(data)
      this.apiPost('admin/Train/TeacherSchrevise', data).then(res => {
        this.handelResponse(res, data => {
          _g.toastMsg('success', res.data)
          this.getSchList()
        })
      })
    },
    searchSch() {
      this.currentPage = 1
      this.getSchList()
    },
    getSchList() {
      this.loading = true
      let data = {
        page: this.currentPage,
        sch_code: this.searchData.sch_code,
        sch_name: this.searchData.sch_name
      }
       // console.log(typeOf(this.userInfo.sch))
      if (this.userInfo.sch !== null) {  //学校账户
        data['sch'] = Lockr.get('schInfo')['sch_id_' + this.userInfo.sch][
          'sch_id'
        ] // name
        // data['sch'] = this.I.sch //id
      }
      console.log(data)
      this.apiPost('admin/Train/TeacherSchlist', data).then(res => {
        this.handelResponse(res, data => {
          // 当为高校管理员的账号登陆的时候，只渲染上面的currentSch的form表单信息
          // console.log(res)
          if (this.userInfo.level === 2) {
            this.boxDisabled = !this.boxDisabled
            this.currentSch = res.data.data[0]
          } else {
            this.schList = res.data.data
          }
          this.total = Math.ceil(data.total / data.per_page)
        })
        this.loading = false
      })
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage
      /*
        1.若是点击所有信息列表的currentPage，则加载getSchList()
        2.若是点击的搜索页面的currentPage，则加载searchSch()
       */
      this.getSchList()
    }
  },
  created() {
    _g.closeGlobalLoading()
    // 当为高校管理员的账号登陆的时候，只显示上面的currentSch的form表单信息
    if (this.userInfo.level === 2) {
      this.seeSchList = false
      this.addBtn = false
      this.editBtn = true
    }
    this.getSchList()
  },
  computed: {},
  components: {},
  mixins: [http]
}
</script>
<style scoped>
.box {
  position: relative;
  border-radius: 3px;
  background: #fff;
  border-top: 3px solid #d2d6de;
  margin-bottom: 20px;
  width: 100%;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  border-top-color: #3c8dbc;
}
.box-header {
  height: 34px;
  line-height: 34px;
  color: #444;
  display: block;
  padding: 10px;
  position: relative;
}
.box-title {
  font-weight: 700;
  letter-spacing: 3px;
  display: inline-block;
  font-size: 18px;
  margin: 0;
}
.box-body {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
  padding: 10px;
  min-height: 0.01%;
  overflow-x: auto;
}
.col-group {
  padding-right: 15px;
  padding-left: 15px;
}
.input-width {
  width: 90%;
}
.el-form-item {
  margin-bottom: 0px;
}

/* .el-table td, .el-table th {
  padding: 12px 0 !important;
} */
</style>
